<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="throttle" >点我节流！</button>
<script>
    // 节流
    window.load = function () {
        let myThrottle = document.getElementById("throttle")
        myThrottle.addEventListener("click", throttle(sayThrottle));
    }


    // 2、节流函数体
    function throttle(fn) {
        alert(1)
        // 4、通过闭包保存一个标记
        let canRun = true;
        return function () {
            // 5、在函数开头判断标志是否为 true，不为 true 则中断函数
            if (!canRun) {
                return;
            }
            // 6、将 canRun 设置为 false，防止执行之前再被执行
            canRun = false;
            // 7、定时器
            setTimeout(() => {
                fn.call(this, arguments);
                // 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
                canRun = true;
            }, 1000);
        };
    }
    // 3、需要节流的事件
    function sayThrottle() {
        console.log("节流成功！");
    }

</script>
</body>
</html>